<template>
    <div class="box-top">
        <div class="first">
            <div class="top">
                <div class="logo" @click="toHome">喜马拉雅</div>
                <div class="input">
                    <el-input v-model="input3" class="w-50 m-2 input-ss" size="default" placeholder="请输入内容"
                        :prefix-icon="Search" :suffix-icon="CircleCloseFilled" @click="toSearch2" />
                </div>

                <el-button class="button1-1" round>打开app</el-button>
            </div>
            <div class="tab">
                <van-tabs v-model="activeName" @click-tab="gettab">
                    <van-tab name="qb" title="全部" />
                    <van-tab name="zj" title="专辑" />
                    <van-tab name="sy" title="声音" />
                    <van-tab name="zb" title="主播" />
                </van-tabs>
            </div>
        </div>
        <router-view></router-view>

        <div class="lastImg">
            <img
                src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp">
            <img
                src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Search, CircleCloseFilled } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';
// import reqApi from '@/api/search/index'
// import useSearch from '@/store/search/index'
// const SearchStore = useSearch()
const router = useRouter()
const route = useRoute()



const toHome = () => {
    router.push({ path: '/home' })
}


const input3 = ref<any>('')
const activeName = ref<string>('a')
console.log('11111')

//获取对应子路由
const gettab = (name: any = { name: 'qb' }) => {
    console.log('title', name.name)
    router.push({
        // path: `/two/${name.name}`,
        name: `${name.name}`,
        query: {
            name: input3.value
        },
    })
}

//全部中的更多跳转

// const changetag = () => {
//     activeName.value = 
// }

//获取数据
// const dd = async (shuru: string) => {
//     let result = await reqApi.reqTagList4( shuru, 'all', 1, 5)
//     console.log('dd', result.data);
//     SearchStore.data = result.data
//     console.log('SearchStore', SearchStore.data)
//     gettab()
//     // category.value = result.category
// }


//跳回搜索页
const toSearch2 = () => {
    router.push({
        name: 'Search',
        query: {
            search: 1
        }
    })
}

onMounted(() => {
    input3.value = route.query.name
    // dd(input3.value)
    gettab()


})
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
    border-radius: 50px;
    height: 30px;
    background-color: #eee;
}

:deep(.el-button.is-round.button1-1) {
    border-color: red;
    position: relative;
    width: 70px;
}

:deep(.el-button.is-round.button1-1 span) {
    color: red;
    ;
    margin: -5px;
    position: absolute;
    top: 13px;
    left: 15px;
}

:deep(.el-input__inner) {
    height: 30px;
    border: 0;
    background-color: #eee;
}
</style>

<style scoped lang="scss">
.box-top {
    box-sizing: border-box;
    width: 100%;
    padding-top: 10px;

    .first {
        border-bottom: 1px solid #eee;

        .top {
            display: flex;
            height: 35px;
            align-items: center;
            justify-content: space-around;

            .logo {
                font-size: 17px;
                width: 20%;
                color: red;
            }

            .input {
                width: 50%;
            }

        }
    }
}

.lastImg {
    position: relative;

    img:first-of-type {
        width: 100%;
        height: 200px;
    }

    img:nth-of-type(2) {
        position: absolute;
        top: 50px;
        left: 100px;
    }
}</style>